<template>
  <div class="nine">
    <img class="img1" src="../img/u1570.png" alt="" />
    <div class="imgWrapper">
      <img class="img2" src="../img/u1518.png" alt="" />
      <span>全场包邮，立刻发货</span>
    </div>
    <div class="shop">
      <ul>
        <li class="each" v-for="item in list1" :key="item.productId">
          <router-link :to="'/topic'+item.productId">
            <img
              class="img3"
              :src="item.productsImg"
              alt=""
            />
            <div class="title">{{item.productName}}</div>
            <p class="p">
              <span class="price">¥9.9</span>
              <span class="count">{{item.productPrice}}</span>   
            </p>
            <div class="buy">买</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Sale } from "../../../api";
export default {
  data() {
    return {
      list: [
      ],
      list1:[],
        imgsrc:"http://192.168.10.26:8080/",
        imglist:[]
    };
  },
  methods: {
      bindIcon() {
          this.list1.map(item=>{
              return
          })
	return 
},
    Sale() {
      Sale({
        discounts:4
      }).then((res) => {
            console.log(res,'sale');
            this.list = res.data.data
        this.list.map(item=>{
            if(item.discounts == 4){
                 item.productsImg = this.$store.state.imgsrc+item.productsImg
                this.list1.push(item)
            }
        })
        console.log(this.list1,"www");
       

      });
    },
  },
  created(){
      this.Sale()
      this.bindIcon()
     
  }
};
</script>

<style scoped>
.img1,
.img2 {
  width: 100vw;
  height: 15vh;
}
.img3 {
  width: 33vw;
  height: 15vh;
}
.title {
  font-size: 14px;
  color: #333333;
  max-width: 25vw;
  min-height: 5vh;
}
.price {
  color: #ff380d;
  font-size: 14px;
}
.p {
  position: relative;
}
.each {
  position: relative;
  width: 35vw;
  margin-left: 10.5vw;
  /* margin-right: 5vw; */
  margin-top: 3vh;
}
.buy {
  border-radius: 5vh;
  width: 13vw;
  height: 5vh;
  background: #ff380d;
  text-align: center;
  line-height: 5vh;
  color: white;
  font-weight: bold;
  position: absolute;
  right: 1vw;
  bottom: -1vh;
  box-shadow: 0.8vw 0.7vh 5px 0px #999999;
}
.count {
  position: absolute;
  text-decoration: line-through;
  color: #999999;
  font-size: 12px;
  top: 2vh;
  left: 10vw;
}
.nine {
  background: #f7f3f3;
}
.imgWrapper {
  position: relative;
}
.imgWrapper span {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  top: 9vh;
}
ul {
  display: flex;
  flex-wrap: wrap;
}
</style>